<template>
  <h3>选项式API(配置)</h3>

  <div>
    <div>
      {{ str }}
    </div>
    <hr />
    <div class="count">{{ count }}</div>
    <button type="button" @click="accCount">累加 count 的值</button>
    <hr />

    <p class="msg">{{ msg }}</p>
    <button type="button" @click="changeMsg">修改msg</button>
    <hr />
    <hr />
    <MyComp></MyComp>
  </div>
</template>

<script>
import MyComp from '@/views/study2/StuDemo2.vue'
const c = 100

// 在外部函数内部无法使用this
function name2() {
  // 这里的this是 undefined
  console.log(this)

  // this.msg = 'sss'
}

export default {
  name: 'Study1StuDemo1',
  components: {
    MyComp
  },
  emits: ['inFocus'],
  props: {
    title: String,
    des: {
      type: [String, Number],
      required: true,
      default: 'des默认值'
    },
    user: {
      type: Object,
      required: true,
      default(rawProps) {
        return {
          name: '志超',
          sex: 1
        }
      }
    }
  },
  data() {
    const str = '好好学习str'

    // 在data函数中return回去的对象里边的属性都是响应式变量
    return {
      msg: str,
      count: c
    }
  },
  methods: {
    changeMsg() {
      // name2()
      this.msg = this.commomMethod()
    },
    accCount() {
      this.count++
    },
    commomMethod() {
      return this.count + this.msg
    }
  },
  computed: {},
  mounted() {},
  watch: () => {}
}
</script>

<style></style>
